<template>
  <div>
    <!-- 首页轮播图的结构 -->
    <Carousel />
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row gutter="20">
      <el-col :span="20">
        <!-- 等级子组件 -->
        <Level @getLevel="getLevel" />
        <!--地区 -->
        <Region @getRegion="getRegion" />
        <!-- 展示医院的结构 -->
        <div class="hospital" v-if="hasHospitalArr.length > 0">
          <Card class="item" v-for="(item, index) in hasHospitalArr" :key="index" :hospitalInfo="item" />
        </div>
        <el-empty v-else description="暂无数据" />
        <!-- 分页器 -->
        <el-pagination 
          v-model:current-page="pageNo" 
          v-model:page-size="pageSize" 
          :page-sizes="[10, 20, 30, 40]"
          :background="true" 
          :total="total"
          layout="prev, pager, next, jumper,->,sizes,total" 
          @current-change="currentChange" 
          @size-change="sizeChange" 
        />
      </el-col>
      <el-col :span="4">
        <Tips></Tips>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Carousel from "@/views/Home/ACarousel/index.vue";
import Search from "@/views/Home/BSearch/index.vue";
import Level from "@/views/Home/CLevel/index.vue";
import Region from "@/views/Home/DRegion/index.vue";
import Card from "@/views/Home/ECard/index.vue";
import Tips from '@/views/Home/FTips/index.vue';
// Tips:医院Api与Vo
import { reqHospital, getHospitalCardData } from "@/api/Home";
import type { Content, HospitalResponseData } from "@/api/Home/types";
//分页器页码
let pageNo = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(10);
//存储已有的医院的数据
let hasHospitalArr = ref<Content>([]);
//存储医院总个数
let total = ref<number>(0);
//存储医院的等级相应数据
let hostype = ref<string>("");
//存储医院的地区
let districtCode = ref<string>("");

//组件挂载完毕：发一次请求
onMounted(() => {
  getHospitalInfo();
});

//获取已有的医院的数据
const getHospitalInfo = async () => {
  //获取医院的数据:默认获取第一页、一页十个医院的数据
  let result: HospitalResponseData = await reqHospital(
    pageNo.value,
    pageSize.value,
    hostype.value,
    districtCode.value
  );
  // TODO -> 获取医院卡片数据接口
  // let result: HospitalResponseData = await getHospitalCardData();
  if (result.code == 200) {
    //存储已有的医院的数据
    hasHospitalArr.value = result.data.content;
    //存储医院的总个数
    total.value = result.data.totalElements;
  }
};

//分页器页码发生变化时候回调
const currentChange = () => {
  getHospitalInfo();
};
//分页器下拉菜单发生变化的时候会触发
const sizeChange = () => {
  //当前页码归第一页
  pageNo.value = 1;
  //再次发请求获取医院的数据
  getHospitalInfo();
};

//子组件自定义事件:获取儿子给父组件传递过来的等级参数
const getLevel = (level: string) => {
  //收集参数:等级参数
  hostype.value = level;
  //再次发请求
  getHospitalInfo();
};
//子组件自定义事件：获取子组件传递过来的地区参数
const getRegion = (region: string) => {
  //存储地区的参数
  districtCode.value = region;
  getHospitalInfo();
};
</script>

<style scoped lang="scss">
.hospital {
  display: flex; // 浮动到一行：display: flex;/float: left;/display: inline-block;/
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
